
<body class="bg-light">


<!-- Bg Overlay -->
<div class="content-overlay"></div>
<!--左部导航 -->
<header class="sidenav" id="sidenav">

    <!-- close -->
    <div class="sidenav__close">
        <button class="sidenav__close-button" id="sidenav__close-button" aria-label="close sidenav">
            <i class="ui-close sidenav__close-icon"></i>
        </button>
    </div>

    <!-- Nav -->
    <nav class="sidenav__menu-container">
        <ul class="sidenav__menu" role="menubar">
            <!-- Categories -->
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--orange">世界</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--blue">商业</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--red">政坛</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--salad">生活</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--purple">科技</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--yellow">时尚</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--light-blue">运动</a>
            </li>
            <li>
                <a href="#" class="sidenav__menu-link sidenav__menu-link-category sidenav__menu-link--violet">科学</a>
            </li>


            <li>
                <a href="about.html" class="sidenav__menu-link">关于</a>
            </li>

            <li>
                <a href="contact.html" class="sidenav__menu-link">接触</a>
            </li>

            <li>
                <a href="#" class="sidenav__menu-link">广告</a>
            </li>
        </ul>
    </nav>

    <div class="socials sidenav__socials">
        <a class="social social-facebook" href="#" target="_blank" aria-label="facebook">
            <i class="ui-facebook"></i>
        </a>
        <a class="social social-twitter" href="#" target="_blank" aria-label="twitter">
            <i class="ui-twitter"></i>
        </a>
        <a class="social social-google-plus" href="#" target="_blank" aria-label="google">
            <i class="ui-google"></i>
        </a>
        <a class="social social-youtube" href="#" target="_blank" aria-label="youtube">
            <i class="ui-youtube"></i>
        </a>
        <a class="social social-instagram" href="#" target="_blank" aria-label="instagram">
            <i class="ui-instagram"></i>
        </a>
    </div>
</header> <!-- end sidenav -->

<main class="main oh" id="main">

    <!-- 顶部 -->
    <header class="nav">

        <div class="nav__holder nav--sticky">
            <div class="container relative">
                <div class="flex-parent">

                    <!-- Side Menu Button -->
                    <button class="nav-icon-toggle" id="nav-icon-toggle" aria-label="Open side menu">
              <span class="nav-icon-toggle__box">
                <span class="nav-icon-toggle__inner"></span>
              </span>
                    </button> <!-- end Side menu button -->

                    <!-- Mobile logo -->
                    <a href="index.html" class="logo logo--mobile d-lg-none">
                        <img class="logo__img" src="static/img/logo_mobile.png"
                             srcset="static/img/logo_mobile.png 1x, static/img/logo_mobile@2x.png 2x" alt="logo">
                    </a>

                    <!-- Nav-wrap -->
                    <nav class="flex-child nav__wrap d-none d-lg-block">
                        <ul class="nav__menu">

                            <li class="active">

                                <a href=' http://127.0.0.1:8000/ '>首页</a>

                            </li>
                            <li class="active">

                                <a href="http://127.0.0.1:8000/">HOME</a>

                            </li>


                        </ul> <!-- end menu -->
                    </nav> <!-- end nav-wrap -->

                    <!-- Nav Right -->
                    <div class="nav__right nav--align-right d-lg-flex">

                        <!-- Socials -->
                        <div class="nav__right-item socials nav__socials d-none d-lg-flex">
                            <a class="social social-facebook social--nobase" href="#" target="_blank"
                               aria-label="facebook">
                                <i class="ui-facebook"></i>
                            </a>
                            <a class="social social-twitter social--nobase" href="#" target="_blank"
                               aria-label="twitter">
                                <i class="ui-twitter"></i>
                            </a>
                            <a class="social social-google social--nobase" href="#" target="_blank" aria-label="google">
                                <i class="ui-google"></i>
                            </a>
                            <a class="social social-youtube social--nobase" href="#" target="_blank"
                               aria-label="youtube">
                                <i class="ui-youtube"></i>
                            </a>
                            <a class="social social-instagram social--nobase" href="#" target="_blank"
                               aria-label="instagram">
                                <i class="ui-instagram"></i>
                            </a>
                        </div>

                        <!-- Search -->
                        <div class="nav__right-item nav__search">
                            <a href="#" class="nav__search-trigger" id="nav__search-trigger">
                                <i class="ui-search nav__search-trigger-icon"></i>
                            </a>
                            <div class="nav__search-box" id="nav__search-box">
                                <form class="nav__search-form">
                                    <input type="text" placeholder="Search an article" class="nav__search-input">
                                    <button type="submit" class="search-button btn btn-lg btn-color btn-button">
                                        <i class="ui-search nav__search-icon"></i>
                                    </button>
                                </form>
                            </div>

                        </div>

                    </div> <!-- end nav right -->

                </div> <!-- end flex-parent -->
            </div> <!-- end container -->

        </div>
    </header> <!-- end navigation -->


    <!-- 导航 -->
    <div class="header">
        <div class="container">
            <div class="flex-parent align-items-center">

                <!-- Logo -->
                <a href="#" class="logo d-none d-lg-block">
                    <h3>NEWS MANAGEMENT SYSTEM</h3>
                </a>

                <!-- Ad Banner 728 -->
                <div class="text-center">
                    <ul class="row">
                        <!-- 条目 -->


                        <!-- Django的 if 模板语句 -->
                        <!-- Django的 if 模板语句 -->
                        {% if user.is_authenticated %}
                        <!-- 如果用户已经登录，则显示用户名下拉框 -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" font_size=25>
                                {{ user.username }}&nbsp &nbsp&nbsp&nbsp&nbsp
                            </a>
                        <li class="nav-item">
                            <a class="nav-link" href='{% url "userprofile:logout" %}'>退出登录</a>
                        </li>

                        </li>
                        <!-- 如果用户未登录，则显示 “登录” -->
                        {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'userprofile:login' %}">登录</a>
                        </li>
                        <!-- if 语句在这里结束 -->
                        {% endif %}


                    </ul>
                </div>


            </div>
        </div>
    </div> <!-- end header -->

    <!-- 滚动 -->
    <div class="trending-now">
        <div class="container relative">
            <span class="trending-now__label">WELCOME</span>
            <ul class="newsticker">
                <li class="newsticker__item"><a href="#" class="newsticker__item-url">欢迎来到校园新闻首页</a></li>
                <li class="newsticker__item"><a href="#" class="newsticker__item-url">注册登录后方可评论新闻</a>
                </li>
                <li class="newsticker__item"><a href="#" class="newsticker__item-url">发布新闻请联系后台工作人员</a>
                </li>
            </ul>
            <div class="newsticker-buttons">
                <button class="newsticker-button newsticker-button--prev" id="newsticker-button--prev"
                        aria-label="next article"><i class="ui-arrow-left"></i></button>
                <button class="newsticker-button newsticker-button--next" id="newsticker-button--next"
                        aria-label="previous article"><i class="ui-arrow-right"></i></button>
            </div>
        </div>
    </div>


</main>
